<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>经典（古典）的圣杯布局</title>
    <style>
      body {
        display: grid;
        height: 100vh;
        grid-template: auto 1fr auto / auto 1fr auto;
      }

      header {
        background: lightpink;
        padding: 2rem;
        grid-column: 1 / 4;
      }

      .left-sidebar {
        background: lightblue;
        grid-column: 1 / 2;
      }

      main {
        background: coral;
        grid-column: 2 / 3;
      }

      .right-sidebar {
        background: yellow;
        grid-column: 3 / 4;
      }

      footer {
        background: wheat;
        padding: 2rem;
        text-align: center;
        grid-column: 1 / 4;
      }

      body {
        font-family: system-ui, sans-serif;
      }

      .left-sidebar,
      .right-sidebar {
        padding: 1rem;
      }
    </style>
  </head>
  <body>
    <header><h1 contenteditable>Header Content</h1></header>
    <div class="left-sidebar" contenteditable>Left Sidebar</div>
    <main contenteditable></main>
    <div class="right-sidebar" contenteditable>Right Sidebar</div>
    <footer contenteditable>Footer Content</footer>
  </body>
</html>
